<template>
  <div class="header-layout">
    <div class="topbar">
      <div class="topbar">
        <div class="topbar-container">
          <template v-for="(item,index) in topNavs" :key="index">
            <a :href="item.redirectUrl" target="_blank"
               class="toplink">
              {{ item.name }}
            </a>
            <span v-if="index !== topNavs.length - 1">·</span>
          </template>
        </div>
      </div>
    </div>
    <div class="header-container">
      <div class="mainbar">
        <div class="logo"></div>
        <div class="logo-word-png">
          <img src="/images/wenzi.png"/>
        </div>
        <div class="logo-word">就业信息网</div>
        <div class="content">
          <ul class="header-nav">
            <template v-for="(item,index) in mainNavs" :key="index">
              <li class="header-li">
                <el-dropdown size="large">
                  <a :href="item.redirectUrl" target="_self" class="header-li-a">{{ item.name }}</a>
                  <template v-if="item.children" #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="(item2,index2) in item.children" :key="index2">{{
                          item2.name
                        }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </li>
              <li v-if="index !== mainNavs.length - 1" class="header-li dot"><b>·</b></li>
            </template>
            <li style="clear:both;"></li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {selectNavList} from '@/api/common.js';
import {ref} from "vue";
import {handleTree} from '@/utils/linyang.js'


const topNavs = ref([]);

selectNavList("topNav").then(res => {
  topNavs.value = res.data;
});


const mainNavs = ref([]);
selectNavList("mainNav").then(res => {
  //console.log(handleTree(res.data));
  mainNavs.value = handleTree(res.data);
});

</script>

<style scoped>
.header-nav {
  height: 120px;
}

.header-nav .header-li {
  height: 120px;
  width: 65px;
  position: relative;
  text-align: center;
  float: left;
  display: flex;
  align-items: center;
}

.header-nav .header-li .header-li-a:focus-visible {
  outline: none;
}

.header-nav .header-li .header-li-a {
  color: #464c5b;
}


.header-nav .header-li .header-li-a:active {
  color: #464c5b;
}


.header-nav .header-li .header-li-a:hover {
  color: #464c5b;
}

.header-nav .header-li.dot {
  font-size: 14px;
  width: 20px;
  margin-right: 35px;
}


.header-nav .header-li > a {
  height: 30px;
}


.header-nav .header-li > a:hover {
  color: #1e78eb;
}


.header-nav .header-li .header-item-nav {
  display: none;
  top: 35px;
  left: -15px;
  margin-top: 45px;
  z-index: 1000;
  position: absolute;
}


.header-nav .header-li .header-item-nav .header-item-li {
  text-align: center;
  height: 40px;
  width: 100px;
  background-color: #ffffff;
  border: 1px solid #e9e9e9;
  box-sizing: border-box;
  line-height: 40px;
  white-space: nowrap;
}


.header-nav .header-li .header-item-nav .header-item-li:hover {
  border-bottom: 1px solid #1e78eb;
  background-color: #f1f1f1;
}


.header-nav .header-li .header-item-nav .header-item-li > a {
  margin-top: 0px;
  position: relative;
  display: inline-block;
  height: 40px;
  width: 100px;
}
</style>
